<template>
  <ChartComp :id="id?id:'domainChart'"
    :message="domainMessage" />
</template>

<script>
import { getProjectType } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      domainMessage: {}
    }
  },
  created() {},
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getProjectType({ year: this.year }).then(res => {
        let xaxis = res?.data?.xaxis ?? []
        let projectData = res?.data?.projectData ?? []

        this.domainMessage = {
          grid: {
            left: '20',
            right: '20',
            top: '15%',
            bottom: '40',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            textStyle: {
              color: '#fff'
            },
            className: 'LineChart-tooltip',
            extraCssText: `background-color: rgba(0, 21, 50, 0.8);
            color: #fff;
            border: 1px solid #214D87;
            border-color: #214D87;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
            border-radius: 4px;`
          },
          xAxis: {
            type: 'category',
            splitLine: { lineStyle: { color: '#204F8C', type: 'dashed' } },
            // axisLabel: {},
            axisLine: {
              lineStyle: {
                color: '#436B9F'
              }
            },
            axisLabel: {
              show: true,
              color: '#B5C5D4'
            },
            data: xaxis
          },
          yAxis: {
            type: 'value',
            minInterval:1,
            splitLine: {
              lineStyle: {
                color: '#204F8C',
                type: 'dashed' //虚线
              },
              show: true //隐藏
            },
            axisLabel: {
              show: true,
              color: '#B5C5D4'
            }
          },
          series: [
            {
              data: projectData,
              type: 'pictorialBar',
              symbol: 'rect',
              symbolMargin: '2', //图形的两边间隔
              symbolSize: [40, 4], //图形大小
              symbolRepeat: 'true', //是否重复
              barWidth: 42,
              itemStyle: {
                color: '#65AAFD'
                // color: () => {
                //   return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                //     { offset: 0, color: '#E3FCFF' },
                //     { offset: 1, color: '#0085FF' }
                //   ])
                // }
              },
              label: {
                //设置label显示
                show: true,
                position: 'top',
                distance: 10,
                fontSize: 14,
                color: '#779DCA'
              },
              symbolClip: true //是否裁剪
            }
          ]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.barChart {
  width: 424px;
  height: 352px;
  border: 1px solid white;
  // background-image: url('/img/ld.png');
  margin: 20px auto;
}
</style>
